---
type: tutorial
title: カスタムブログレイアウトにデータを作成して渡す
description: >-
  「初めてのAstroブログ」チュートリアル -
  Markdownファイル用のブログ記事レイアウトを作成し、フロントマターの値をpropsとして渡す
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

ページ用のレイアウトができたので、ブログ記事用のレイアウトも追加しましょう！

<PreCheck>
  - Markdownファイル用の新しいブログ記事レイアウトを作成する
  - レイアウトコンポーネントにYAMLフロントマターの値をpropsとして渡す
</PreCheck>

## ブログ記事にレイアウトを追加する

`.md`ファイルでフロントマターに`layout`プロパティを含めると、フロントマターのYAMLの値がレイアウトファイルで利用できるようになります。

<Steps>
1. `src/layouts/MarkdownPostLayout.astro`に新しいファイルを作成します。

2. `MarkdownPostLayout.astro`に以下のコードをコピーします。

    ```astro title="src/layouts/MarkdownPostLayout.astro"
    ---
    const { frontmatter } = Astro.props;
    ---
    <h1>{frontmatter.title}</h1>
    <p>著者: {frontmatter.author}</p>
    <slot />
    ```

3. `post-1.md`に以下のフロントマタープロパティを追加します。

    ```markdown title="src/pages/posts/post-1.md" ins={2}
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: '私の最初のブログ記事'
    pubDate: 2022-07-01
    description: 'これは私の新しいAstroブログの最初の記事です。'
    author: 'Astro学習者'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png' 
        alt: 'Astroのロゴ。'
    tags: ["astro", "ブログ", "公開学習"]
    ---
    ```

4. ブラウザのプレビューで`http://localhost:4321/posts/post-1`を再度確認し、レイアウトによりページに追加された内容を確認します。

5. 同じレイアウトプロパティを他のブログ記事`post-2.md`と`post-3.md`にも追加します。ブラウザで、これらの記事にもレイアウトが適用されていることを確認します。
</Steps>

:::tip
レイアウトを使用すると、ページタイトルなどの要素をMarkdownコンテンツに含めるか、それともレイアウトに含めるかを選択できます。要素が重複しないよう、ページプレビューを目視で確認し、必要に応じて調整してください。
:::

<Box icon="puzzle-piece">

## やってみよう - ブログ記事レイアウトをカスタマイズする

**チャレンジ**: 各ブログ記事に共通する要素を特定し、`MarkdownPostLayout.astro`を使用してそれらをレンダリングすることで、`post-1.md`や将来のブログ記事で同じ記述を繰り返さないようにしてみましょう。

`pubDate`をMarkdownの本文に書くのではなく、レイアウトコンポーネントに含めるようにコードをリファクタリングする例を以下に示します。

```markdown title="src/pages/posts/post-1.md" del={1}
投稿日: 2022-07-01

Astroの学習についての私の _新しいブログ_ へようこそ！ここでは、新しいウェブサイトを作りながら、私の学習過程を共有します。
```

```astro title="src/layouts/MarkdownPostLayout.astro" ins={5}
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>投稿日: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>著者: {frontmatter.author}</p>
<slot />
```

自分にとって有用だと思う箇所はすべてリファクタリングし、レイアウトへの追加も必要なだけおこなってください。レイアウトに要素を1つ追加すると、各ブログ記事でそれを書く手間が省けることを忘れないでください。

以下は、個々のブログ記事のコンテンツのみスロットでレンダリングするようにリファクタリングしたレイアウトの例です。これを使っても良いですし、自分で作成しても構いません！

```astro title="src/layouts/MarkdownPostLayout.astro"
---
const { frontmatter } = Astro.props;
---
<h1> {frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>著者: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
```
</Box>

:::note[重複を避ける]
レイアウトによってレンダリングされるものは、ブログ記事に入力する必要はありません。ブラウザのプレビューで重複を見つけた場合は、Markdownファイルからコンテンツを削除してください。
:::



<Box icon="question-mark">

### 確認テスト

以下の2つのコンポーネントが有効なAstroコードとして機能するためには、空欄に何を入れる必要がありますか？

1.  ```markdown title="src/pages/posts/learning-astro.md"
    ---
    layout: ../../__________/MyMarkdownLayout.astro
    title: "AstroにおけるMarkdownについて学ぶ"
    author: Astro学習者
    ____: 2022-08-08
    ---
    今日は多くのことを学びました！AstroではMarkdownで書くことができますが、フロントマターから変数を渡すこともできるのです。Astroのレイアウトコンポーネントでもこれらの値にアクセスできます。
    ```

2.  ```astro title="src/layouts/MyMarkdownLayout.astro"
    ---
    import ____________ from '../components/Footer.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>著者: {frontmatter.______}（{frontmatter.pubDate}に投稿）</p>
    < _______ />
    <Footer />
    ```
    <details>
        <summary>空欄に入る内容を見る。</summary>

        1.  ```markdown title="src/pages/posts/learning-astro.md" "layouts" "pubDate"
            ---
            layout: ../../layouts/MyMarkdownLayout.astro
            title: "AstroにおけるMarkdownについて学ぶ"
            author: Astro学習者
            pubDate: 2022-08-08
            ---
            今日は多くのことを学びました！AstroではMarkdownで書くことができますが、フロントマターから変数を渡すこともできるのです。Astroのレイアウトコンポーネントでもこれらの値にアクセスできます。
            ```

        2.  ```astro title="src/layouts/MyMarkdownLayout.astro" " Footer " " frontmatter " "author" "slot"
            ---
            import Footer from '../components/Footer.astro'
            const { frontmatter } = Astro.props
            ---
            <h1>{frontmatter.title}</h1>
            <p>著者: {frontmatter.author}（{frontmatter.pubDate}に投稿）</p>
            <slot />
            <Footer />
            ```
    </details>
</Box>

<Box icon="check-list">

## チェックリスト

<Checklist>
- [ ] YAMLフロントマターでMarkdownブログ記事にレイアウトプロパティを追加できる。
- [ ] Markdown記事用に別のレイアウトを作成できる。
- [ ] ブログ記事のフロントマターの値をレイアウトコンポーネントで使用できる。
</Checklist>

</Box>

### Resources

- [AstroにおけるMarkdownレイアウト](/ja/guides/markdown-content/#フロントマター-layout)

- [Markdownレイアウトのprops](/ja/basics/layouts/#markdownレイアウトのprops)

- [Introduction to YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) <Badge>外部サイト</Badge>
